<template>
    <div class="panel_tree">
        <!--        天空-->
        <img class="sky" src="@/assets/img/tree/sky.png">
        <!--        //后山-->
        <img class="second_mountain" src="@/assets/img/tree/second_mountain.png">
        <!--        //前山-->
        <img class="first_mountain" src="@/assets/img/tree/first_mountain.png">

        <!--        //湖水-->
        <img class="lake_water" src="@/assets/img/tree/lake_water.png">
        <!--        //远处的岸边-->
        <img class="middle_tree" src="@/assets/img/tree/middle_tree.png">
        <img class="shadow_middle_tree" src="@/assets/img/tree/middle_tree.png">
        <div class="panel_boat1">
            <div class="boat_word">{{word }}</div>
            <img class="boat1" src="@/assets/img/tree/boat.png">

        </div>

        <img class="boat2" src="@/assets/img/tree/boat.png">
        <!--        //左边的河岸-->
        <img class="left_tree" src="@/assets/img/tree/left_tree.png">
        <img class="shadow_left_tree" src="@/assets/img/tree/left_tree.png">
        <!--        //右边的河岸-->

        <img class="right_tree" src="@/assets/img/tree/right_tree.png">
        <img class="shadow_left_right" src="@/assets/img/tree/right_tree.png">
    </div>
</template>

<script>
    export default {
        name: "Tree",
        data() {
            return {
                word:'',
                words: [
                    '江南可采莲 ~',
                    '君问归期未有期..',
                    '蓬山此去无多路！',
                    '客路青山外',
                    '醉后不知天在水',
                    '满船清梦压星河',
                    '月黑见渔灯'

                ]
            }
        },
        mounted(){
            this.wordBoat()
        },
        methods:{
            wordBoat(){
                console.log('create verse Interval');
                  if (!this.showWord) {
                      setInterval(this.showWord, 10000);
                  }
            },
            showWord(){
                console.log('setting up random verse');
                if(this.numRandom(1,100)<60){
                    let i=this.numRandom(0,6);
                    this.word=this.words[i];
                    $('.boat_word').fadeIn(2500);
                    $('.boat_word').fadeOut(2000);
                }
            },
            numRandom(min, max) {
                return Math.floor(Math.random() * (max - min) + min);
            },
        },
        beforeDestroy() {
            if (this.showWord) {
                clearInterval(this.showWord); // 在Vue实例销毁前，清除时间定时器
                console.log('destroy verse Interval')
            }
        }
    }
</script>

<style scoped>
    .panel_tree {
        width: 100vw;
        height: 12vw;
        margin-top: 4vw;
    }

    .boat_word {
        float: right;
        /*border: 1px skyblue dashed;*/
        color: white;
        opacity: 0.7;
        font-family: STXINGKA;
        font-size: 0.8vw;
        display: none;
    }

    .second_mountain {
        position: absolute;
        right: 0;
        height: 10vw;
        width: 110%;
        margin-top: -2vw
    }

    .first_mountain {
        position: absolute;
        right: 0;
        height: 10vw;
        width: 100%;
    }

    .lake_water {
        position: absolute;
        left: 0;
        height: 3vw;
        width: 100%;
        margin-top: 10vw
    }

    .sky {
        position: absolute;
        right: 0;
        height: 10vw;
        width: 110%;
        margin-top: -4vw;
    }

    .middle_tree {
        position: absolute;
        right: 0;
        height: 10vw;
        width: 100vw;
        margin-top: 1vw
    }

    .left_tree {
        position: absolute;
        left: 0;
        height: 8.5vw;
        margin-top: 3vw
    }

    .right_tree {
        position: absolute;
        right: 0;
        height: 8.5vw;
        margin-top: 3vw
    }


    .shadow_middle_tree {
        position: absolute;
        right: 0;
        height: 6vw;
        width: 100vw;
        margin-top: 11vw;
        transform: rotateY(180deg);
        transform: rotateX(180deg);
        opacity: 0.4;
        overflow: hidden;

    }

    .shadow_left_tree {
        position: absolute;
        left: 0;
        height: 8.5vw;
        margin-top: 11.5vw;
        transform: rotateY(180deg);
        transform: rotateX(180deg);
        opacity: 0.7;
    }

    .shadow_left_right {
        position: absolute;
        right: 0;
        height: 8.5vw;
        margin-top: 11.5vw;
        transform: rotateY(180deg);
        transform: rotateX(180deg);
        opacity: 0.7;
    }

    .panel_boat1 {
        margin-top: 9.7vw;
        position: absolute;
        left: 95vw;

        animation: wave1 8s;
        animation-iteration-count: infinite;
        animation-direction: alternate;

        animation: pos1 120s;
        animation-iteration-count: infinite;
    }

    .boat1 {
        width: 2.3vw;
        height: 2vw;
    }

    .boat2 {
        left: 39vw;
        margin-top: 9.5vw;
        width: 1.9vw;
        height: 1.9vw;
        position: absolute;
        z-index: 0;
        animation: wave1 8s;
        animation-iteration-count: infinite;
        animation-direction: alternate;

        animation: pos2 140s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes wave1 {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(7deg);
        }

        100% {
            transform: rotate(-7deg);
        }
    }

    @keyframes pos1 {
        0% {
            left: 90vw;
        }

        50% {
            left: 9vw;
            /*transform: rotateY(0deg);*/
        }
        /*52% {*/

        /*    transform: rotateY(180deg);*/
        /*}*/
        /*97% {*/
        /*    transform: rotateY(180deg);*/
        /*}*/
        100% {
            left: 90vw;
        }
    }

    @keyframes pos2 {
        0% {
            left: 39vw;
        }

        50% {
            left: 3vw;
            /*transform: rotateY(0deg);*/
        }
        /*52% {*/
        /*    transform: rotateY(180deg);*/
        /*}*/
        /*97% {*/
        /*    transform: rotateY(180deg);*/
        /*}*/
        100% {
            left: 98vw;
        }
    }
</style>
